<template>
  <div class="container">
    <div class="form">
      <t-row justify="center" style="margin-bottom: 20px">
        <t-space align="center" direction="vertical">
          <t-avatar size="70px"><t-icon name="user-circle" size="60px"></t-icon></t-avatar>
          <span style="font-size: 20px">注册MetalX</span>
        </t-space>
      </t-row>

      <t-form ref="form" :data="formData" :colon="true" :label-width="0" @reset="onReset" @submit="onSubmit">
        <t-form-item name="account">
          <t-input v-model="formData.account" clearable placeholder="请输入账户名">
            <template #prefix-icon>
              <desktop-icon />
            </template>
          </t-input>
        </t-form-item>

        <t-form-item name="password">
          <t-input v-model="formData.password" type="password" clearable placeholder="请输入密码">
            <template #prefix-icon>
              <lock-on-icon />
            </template>
          </t-input>
        </t-form-item>

        <t-form-item>
          <t-button theme="primary" type="submit" block>注册</t-button>
        </t-form-item>

        <t-row justify="center" style="margin-bottom: 20px">
          <span style="font-size: 15px">已有帐号？<RouterLink to="/login">去登录</RouterLink> </span>
        </t-row>
      </t-form>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { reactive } from 'vue'
import { useRouter, RouterLink } from 'vue-router'
import { MessagePlugin, type FormProps } from 'tdesign-vue-next'
import { DesktopIcon, LockOnIcon } from 'tdesign-icons-vue-next'
const router = useRouter()
const formData: FormProps['data'] = reactive({
  account: '',
  password: '',
})
const onReset: FormProps['onReset'] = () => {
  MessagePlugin.success('重置成功')
}
const onSubmit: FormProps['onSubmit'] = ({ validateResult, firstError }) => {
  if (validateResult === true) {
    MessagePlugin.success('提交成功')
    router.replace('/')
  } else {
    console.log('Validate Errors: ', firstError, validateResult)
    MessagePlugin.warning(firstError as string)
  }
}
</script>

<style scoped lang="less">
.container {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.form {
  width: 350px;
}
</style>
